<template>
    <view class="dl-flex switch">
        <view v-for="(item, index) in options" @click="handleClick(index)" class="switch-item dl-round" :class="{ active: index == currentIndex }">
            {{ item.text }}
        </view>
    </view>
</template>

<script>
export default {
    name: 'main-switch',
    props: {
        data: {
            type: String,
            default: 'weight'
        },
        options: {
            type: Array,
            default: [
                { text: '体重', value: 'weight' },
                { text: '热量', value: 'calories' },
                { text: '睡眠', value: 'sleep' }
            ]
        }
    },
    data() {
        return {
            currentIndex: 0
        };
    },
    mounted() {
        this.currentIndex = this.options.findIndex((item) => item.value == this.data);
    },
    methods: {
        handleClick(index) {
            this.currentIndex = index;
            this.$emit('change', this.options[index], index);
        }
    }
};
</script>

<style lang="scss" scoped>
.switch {
    background-color: #f2f2f2;
    display: inline-flex;
    border-radius: 8rpx;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    &-item {
        font-size: 28rpx;
        padding: 8rpx 20rpx;

        &.active {
            background-color: $brand-color;
            color: #fff;
        }
    }
}
</style>
